@import url('../css/jquery.jqplot.min.css');

/* CSS Reset
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}									
article, aside, figure, footer, header, nav, section, details, summary {display: block;}
img,
object,
embed {max-width: 100%;}
html {overflow-y: scroll;}
ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
input, select {vertical-align: middle;}
pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}
select, input, textarea {font: 99% sans-serif;}
table {font-size: inherit; font: 100%;}
small {font-size: 85%;}
strong {font-weight: bold;}
td, td img {vertical-align: top;} 
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
pre, code, kbd, samp {font-family: monospace, sans-serif;}
.clickable,
label, 
input[type=button], input[type=submit], input[type=file], button {cursor: pointer;}
button, input, select, textarea {margin: 0;}
button {width: auto; overflow: visible;}
.ie7 img {-ms-interpolation-mode: bicubic;}
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  

/* End CSS Reset
-------------------------------------------------------------------------------*/

html {
	overflow-y:hidden;
	min-width: 768px;
}

body {
  font: lighter 13px/1.5 'Open Sans', Helvetica, Verdana, Arial;
  color: #191919;
}

a {
	text-decoration: none;
  color: #6d9fbf;
  /*text-transform: uppercase;*/
  font-weight: bold;
}

a.toggle {
	padding-left: 18px;
	background: url(../img/caret-blue-right.png) center left no-repeat;
}

[class*="icon-"] {
	display: block;
	background: url(../img/icon-sprites.png) no-repeat;
}

.btn {
	display: inline-block;
	background: transparent;
	border: none;
	padding: 0;
}

.btn > [class*="icon-"] {
	display: inline-block;
}

.btn + .btn {
	margin-left: 5px;
}

.btn.btn-primary > [class*="icon-"] {
	height: 40px;
	width: 40px;
}

.btn > [class*="icon-"] {
	height: 16px;
	width: 16px;
}

.btn.btn-primary.active > .icon-wand,
.btn.btn-primary:hover > .icon-wand {
	background-position: 0 -45px; 
}

.btn.btn-primary:hover > .icon-check {
	background-position: -45px -45px; 
}

.btn.btn-primary:hover > .icon-x {
	background-position: -90px -45px; 
}

.btn-primary .icon-x {
	background-position: -90px 0;
}

.icon-wand {
	background-position: 0 0;
}

.icon-pen-note {
	background-position: -51px -90px;
}

.icon-file {
	background-position: 1px -90px;
}

.icon-refresh {
	background-position: -25px -90px;
}

.icon-x {
	background-position: -72px -90px;
}

.icon-check {
	background-position: -45px 0;
}

.elipsis {
	width: 20px;
	height: 5px;
	background: url(../img/h-elipsis.png) no-repeat center center;
	position: absolute;
	cursor: pointer;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.barHide {
	cursor: pointer;
}

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid #235a7e;
  border-right: 4px solid transparent;
  border-bottom: 0 dotted;
  border-left: 4px solid transparent;
  content: "";
  margin-top: -14px;
}

/* Transition
-------------------------------------------------------------------------------*/
a,
#tableFilter,
#tableFilter .select-input,
#tableFilter label,
.tableData,
.tableOpt,
#sidebarRight,
.tableData table tbody tr,
.modal,
.nav > li > a,
.elipsis {
	-webkit-transition: all 0.15s linear;
   -moz-transition: all 0.15s linear;
     -o-transition: all 0.15s linear;
      transition: all 0.15s linear;
}

.nav > li > a + .nav > li > a {
	-webkit-animation:win8-slide-2 0.7s;
     -moz-animation:win8-slide-2 0.7s;
      -ms-animation:win8-slide-2 0.7s;
       -o-animation:win8-slide-2 0.7s;
          animation:win8-slide-2 0.7s;
}

.nav > li > a + .nav > li + li > a {
	-webkit-animation:win8-slide-2 0.72s;
     -moz-animation:win8-slide-2 0.72s;
      -ms-animation:win8-slide-2 0.72s;
       -o-animation:win8-slide-2 0.72s;
          animation:win8-slide-2 0.72s;
}

.nav > li > a + .nav > li + li + li > a {
	-webkit-animation:win8-slide-2 0.74s;
     -moz-animation:win8-slide-2 0.74s;
      -ms-animation:win8-slide-2 0.74s;
       -o-animation:win8-slide-2 0.74s;
          animation:win8-slide-2 0.74s;
}

.nav > li > a + .nav > li + li + li + li > a {
	-webkit-animation:win8-slide-2 0.76s;
     -moz-animation:win8-slide-2 0.76s;
      -ms-animation:win8-slide-2 0.76s;
       -o-animation:win8-slide-2 0.76s;
          animation:win8-slide-2 0.76s;
}

.nav > li > a + .nav > li + li + li + li + li > a {
	-webkit-animation:win8-slide-2 0.78s;
     -moz-animation:win8-slide-2 0.78s;
      -ms-animation:win8-slide-2 0.78s;
       -o-animation:win8-slide-2 0.78s;
          animation:win8-slide-2 0.78s;
}

.nav > li > a + .nav > li + li + li + li + li + li > a {
	-webkit-animation:win8-slide-2 0.80s;
     -moz-animation:win8-slide-2 0.80s;
      -ms-animation:win8-slide-2 0.80s;
       -o-animation:win8-slide-2 0.80s;
          animation:win8-slide-2 0.80s;
}

.nav > li > a + .nav > li + li + li + li + li + li + li > a {
	-webkit-animation:win8-slide-2 0.82s;
     -moz-animation:win8-slide-2 0.82s;
      -ms-animation:win8-slide-2 0.82s;
       -o-animation:win8-slide-2 0.82s;
          animation:win8-slide-2 0.82s;
}
#tableForm {
	-webkit-transition: all 0.10s linear;
   -moz-transition: all 0.10s linear;
     -o-transition: all 0.10s linear;
      transition: all 0.10s linear;
}
#tableForm1 {
	-webkit-transition: all 0.10s linear;
   -moz-transition: all 0.10s linear;
     -o-transition: all 0.10s linear;
      transition: all 0.10s linear;
}
#tableForm2 {
	-webkit-transition: all 0.10s linear;
   -moz-transition: all 0.10s linear;
     -o-transition: all 0.10s linear;
      transition: all 0.10s linear;
}
#tableForm3 {
	-webkit-transition: all 0.10s linear;
   -moz-transition: all 0.10s linear;
     -o-transition: all 0.10s linear;
      transition: all 0.10s linear;
}

#tableFilter .btn {
	-webkit-transition: opacity 0.55s linear;
   -moz-transition: opacity 0.55s linear;
     -o-transition: opacity 0.55s linear;
      transition: opacity 0.55s linear;
}

@keyframes win8-slide-2{
	0% {padding-left: 0;}
	50% {padding-left: 35px;}
	100% {padding-left: 20px;}
}

@-webkit-keyframes win8-slide-2{/* Safari and Chrome */
	0% {padding-left: 0;}
	50% {padding-left: 35px;}
	100% {padding-left: 20px;}
}
/* End Transition
-------------------------------------------------------------------------------*/

/* Sidebar
-------------------------------------------------------------------------------*/
#sidebarMenu {
	cursor: pointer;
	position: fixed;
	width: 325px;
	bottom: 10px;
	top: 10px;
	background-color: #6d9fbf;
	padding: 15px 0 0;
	border-radius: 0 10px 10px 0;
	z-index: 4;
	overflow: auto;
}

#sidebarMenu .alt-scroll-content {
	width: 100% !important;
	height: 100% !important;
}

.nav > li > a {
	text-transform: capitalize;
	font-size: 25px;
	font-weight: lighter;
	line-height: 32px;
	padding: 5px 20px;
	display: block;
	color: #fff;
}

.nav > li.active > a + .nav > li.active > a,
.bottom-fix > .nav > li.active > a,
.nav > li > a:hover {
	background-color: #235a7e;
}

.nav > li.active > a:hover {
	background-color: transparent;
	cursor: default;
}

.nav > li > a + .nav li a {
	font-size: 16px;
	line-height: 28px;
	color: #b7e0ff;
}

.nav > li > a + .nav li a:hover {
	color: #fff;
}
.nav > li > a > ul > li  > a
 {
	text-transform: capitalize;
	font-size: 25px;
	font-weight: lighter;
	line-height: 32px;
	padding: 5px 20px;
	display: block;
	color: #fff;
}


.bottom-fix {
	width: 100%;
	position: absolute;
	bottom: 0;
}

#sidebarMenu .bottom-fix > .nav > li {
	border-bottom: 3px solid #fff;
}
#sidebarMenu .bottom-fix > .nav > li.TopSection {
	font-size: 30px;
	font-weight: bolder;
	color: #235a7e;
	padding: 5px;
}
/* End Sidebar
-------------------------------------------------------------------------------*/

/* Color Toggle
-------------------------------------------------------------------------------*/
#colorToggle {
	padding: 12px 0 8px;
	display: inline-block;
	width: 100%;
	text-align: center;
	border-radius: 0 0 10px 0;
}

#colorToggle:hover {
	background-color: #afbfca;
}

#colorToggle > [class*="icon-"] {
	margin: 0 auto;
	display: inline-block;
}

#colorToggle.active {
	background-color: #afbfca;
	padding-right: 30px;
}
/* End Color Toggle
-------------------------------------------------------------------------------*/


#colorudel > [class*="icon-"] {
	margin: 0 auto;
	display: inline-block;
}

#colorudel.active {
	background-color: #afbfca;
	padding-right: 30px;
}
/* Table Filter
-------------------------------------------------------------------------------*/
#tableFilter.filterOpen {
	height: 50px;
}

#tableFilter {
	right: 40px;
	position: fixed;
	margin-left: 335px;
	left: 0;
	top: 10px;
	background-color: #6d9fbf;
	z-index: 2;
	padding: 10px;
	border-radius: 10px;
	overflow-y: hidden;
	overflow-x: hidden;
	height: 10px;
}

#tableFilter.moreLeft {
	right: 310px;
}

#tableFilter .elipsis {
	top: 50%;
	display: block;
	position: absolute;
	right: 10px;
	height: 30px;
	margin-top: -15px;
}

#tableFilter.filterOpen {
	overflow-x: auto;
}

#tableFilter.filterOpen .elipsis {
	top: 80%;
}

#tableFilter .select-input {
	margin-top: 10px;
}

#tableFilter label {
	line-height: 10px;
}

#tableFilter.filterOpen label {
	line-height: 15px;
}

#tableFilter.filterOpen .btn {
	opacity: 1;
}

#tableFilter .btn {
	float: left;
	margin: 25px 10px 0 8px;
	opacity: 0;
}

label {
	line-height: 20px;
	display: block;
	text-transform: capitalize;
}

.select-input {
	background: url(../img/caret-blue-down.png) no-repeat right center #235a7e;
	overflow: hidden;
	height: 25px;
	line-height: 25px;
	margin-top: 5px;
	float: left;
}

.select-input + .select-input {
	margin-left: 8px;
}

.select-input select{
	height: 25px;
	width: 150%;
	border: none;
	background-color: transparent;
	-webkit-appearance: none;
	color: #fff;
	padding: 0 6px;
}

.select-input select option {
	background-color: #9fb2be;
}

.form-group {
	float: left;
}

.form-group + .form-group {
	margin-left: 20px;
}

#viewBy {width: 138px;}
#employee {width: 218px;}
#period {width: 98px;}
#date {width: 58px;}
#month {width: 58px;}
#year {width: 68px;}
#more {width: 118px;}

#tableFilter .btn > [class*="icon-"] {
	height: 23px;
	width: 23px;
}
/* End Table Filter
-------------------------------------------------------------------------------*/

/* Table Data
-------------------------------------------------------------------------------*/
.tableData,
.tableOpt {
	position: fixed;
	margin-left: 335px;
	left: 0;
	right: 40px;
	z-index: 1;
}

#tableFilter.filterOpen ~ .tableData {
	top: 90px;
}

.tableData {
	top: 50px;
	bottom: 60px;
	overflow: auto;
}

.tableData .alt-scroll-content {
	width: 991px !important;
}

#tableForm.openForm + .tableData {
	margin-left: 645px;
}

.tableData tr.active,
.tableData tr.clicked {
	background-color: #afbfca;
	border-color: transparent;
}

#tableForm.openForm + .tableData tr.active .formToggle {
	display: none;
}

.tableData tr.active .formToggle {
	display: inline-block;
}

#tableForm.openForm + .tableData tr td.arrow-space {
	background: none;
}

#tableForm.openForm + .tableData tr.active td.arrow-space {
	background: url(../img/active-row.png) no-repeat left center;
	background-color: contain;
}

#tableForm.openForm + .tableData tr td:last-child,
#tableForm.openForm + .tableData tr th:last-child {
	display: none;
}


.tableData.moreLeft {
	right: 310px;
}

.tableOpt {
	bottom: 20px;
}

.tableData table {
	width: 100%;
	margin-bottom: 5px;
}

.tableData table thead tr {
	background-color: #e4e4e4;
}

.tableData table th {
	font-weight: normal;
}

.tableData table thead tr th,
.tableData table tbody tr td {
	padding: 7px 10px;
}

.tableData table tbody tr:hover {
	background-color: #d7efff;
}

.tableData table tbody tr {
	border-bottom: 1px solid #e4e4e4;
	cursor: pointer;
}

.tableData .btn + .btn {
	margin-left: 0;
}

.blocker {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 2;
	background:transparent;
}

.blocker.hide {
	position: fixed;
	width: 0;
	height: 0;
	z-index: -999;
}

/* End Table Data
-------------------------------------------------------------------------------*/

/* Pagination
-------------------------------------------------------------------------------*/
.pagination {
	float: right;
}

.pagination > li {
	float: left;
}

.pagination > li + li {
	margin-left: 5px;
}

.pagination > li > a {
	line-height: 26px;
	width: 26px;
	text-align: center;
	height: 26px;
	background-color: #afbfca;
	display: block;
	padding: 0;
	font-weight: normal;
	color: #fff;
}

.pagination > li:first-child > a,
.pagination > li:last-child > a {
	width: auto;
	padding: 0 10px;
}

.pagination > .disabled > a,
.pagination > .disabled > a:hover, 
.pagination > .disabled > a:focus {
	color: #9fb2be;
	cursor: not-allowed;
	background-color: #e4e4e4;
}

.pagination > li > a:hover {
	background-color: #235a7e;
}

.pagination > .active > a, 
.pagination > .active > span, 
.pagination > .active > a:hover, 
.pagination > .active > span:hover, 
.pagination > .active > a:focus, 
.pagination > .active > span:focus {
	z-index: 2;
	color: #ffffff;
	cursor: default;
	background-color: #6d9fbf;
}
/* End Pagination
-------------------------------------------------------------------------------*/

/* Table Form
-------------------------------------------------------------------------------*/
#tableForm {
	width: 0;
	padding: 20px;
	position: fixed;
	bottom: 60px;
	top:50px;
	left: -50px;
	margin-left: 335px;
	z-index: 3;
	background-color: #afbfca;
	overflow: auto;
}

#tableForm .alt-scroll-content {
	width: 260px !important;
}

#tableForm{
	width: 260px;
	left: 0;
}

#tableForm label {
	font-size: 14px;
}

#tableForm .select-input {
	height: 30px;
	line-height: 30px;
	background: url(../img/caret-black-down.png) no-repeat right center #9fb2be;
}

#tableForm .form-group + .form-group {
	margin-top: 10px;
	margin-left: 0;
}

#tableForm .form-group,
#tableForm .select-input {
	float: none;
}

#tableForm textarea,
#tableForm input[type="text"],
#tableForm input[type="password"],
#tableForm input[type="datetime"],
#tableForm input[type="datetime-local"],
#tableForm input[type="date"],
#tableForm input[type="month"],
#tableForm input[type="time"],
#tableForm input[type="week"],
#tableForm input[type="number"],
#tableForm input[type="email"],
#tableForm input[type="url"],
#tableForm input[type="search"],
#tableForm input[type="tel"],
#tableForm input[type="color"] {
  display: inline-block;
  height: 22px;
  padding: 4px 1%;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 22px;
  color: #FFFFFF;
  vertical-align: middle;
	border: none;
	background-color: #9fb2be;
	width: 98%;
}

#tableForm textarea {
	resize:none;
	height: 72px;
}

#tableForm .btn + .btn {
	margin-left: 10px;
}

#tableFormimport {
	width: 0;
	padding: 20px;
	position: fixed;
	bottom: 60px;
	top:50px;
	left: -50px;
	margin-left: 335px;
	z-index: 3;
	/*background-color: #afbfca;*/
	overflow: auto;
}

#tableFormimport .alt-scroll-content {
	width: 350px !important;
}

#tableFormimport{
	width: 350px;
	left: 0;
}

#tableFormimport label {
	font-size: 14px;
}

#tableFormimport .select-input {
	height: 30px;
	line-height: 30px;
	background: url(../img/caret-black-down.png) no-repeat right center #9fb2be;
}

#tableFormimport .form-group + .form-group {
	margin-top: 10px;
	margin-left: 0;
}

#tableFormimport .form-group,
#tableFormimport .select-input {
	float: none;
}

#tableFormimport textarea,
#tableFormimport input[type="text"],
#tableFormimport input[type="password"],
#tableFormimport input[type="datetime"],
#tableFormimport input[type="datetime-local"],
#tableFormimport input[type="date"],
#tableFormimport input[type="month"],
#tableFormimport input[type="time"],
#tableFormimport input[type="week"],
#tableFormimport input[type="number"],
#tableFormimport input[type="email"],
#tableFormimport input[type="url"],
#tableFormimport input[type="search"],
#tableFormimport input[type="tel"],
#tableFormimport input[type="color"] {
  display: inline-block;
  height: 22px;
  padding: 4px 1%;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 22px;
  color: #555555;
  vertical-align: middle;
	border: none;
	background-color: #9fb2be;
	width: 98%;
}

#tableFormimport textarea {
	resize:none;
	height: 72px;
}

#tableFormimport .btn + .btn {
	margin-left: 10px;
}


#tableForm1 {
	width: 0;
	padding: 20px;
	position: fixed;
	bottom: 60px;
	top:50px;
	left: -50px;
	margin-left: 335px;
	z-index: 3;
	background-color: #afbfca;
	overflow: auto;
}

#tableForm1 .alt-scroll-content {
	width: 260px !important;
}

#tableForm1{
	width: 260px;
	left: 0;
}

#tableForm1 label {
	font-size: 14px;
}

#tableForm1 .select-input {
	height: 30px;
	line-height: 30px;
	background: url(../img/caret-black-down.png) no-repeat right center #9fb2be;
}

#tableForm1 .form-group + .form-group {
	margin-top: 10px;
	margin-left: 0;
}

#tableForm1 .form-group,
#tableForm1 .select-input {
	float: none;
}

#tableForm1 textarea,
#tableForm1 input[type="text"],
#tableForm1 input[type="password"],
#tableForm1 input[type="datetime"],
#tableForm1 input[type="datetime-local"],
#tableForm1 input[type="date"],
#tableForm1 input[type="month"],
#tableForm1 input[type="time"],
#tableForm1 input[type="week"],
#tableForm1 input[type="number"],
#tableForm1 input[type="email"],
#tableForm1 input[type="url"],
#tableForm1 input[type="search"],
#tableForm1 input[type="tel"],
#tableForm1 input[type="color"] {
  display: inline-block;
  height: 22px;
  padding: 4px 1%;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 22px;
  color: #555555;
  vertical-align: middle;
	border: none;
	background-color: #9fb2be;
	width: 98%;
}

#tableForm1 textarea {
	resize:none;
	height: 72px;
}

#tableForm1 .btn + .btn {
	margin-left: 10px;
}
#tableForm1 .nav li.active{
background-color: #235a7e;
}
#tableForm1 .nav li a{

font-size: 16px;
}

#tableForm2 {
	width: 0;
	padding: 20px;
	position: fixed;
	bottom: 60px;
	top:50px;
	left: -50px;
	margin-left: 650px;
	z-index: 3;
	/*background-color: #afbfca;*/
	overflow: auto;
}
5
#tableForm2 .alt-scroll-content {
	width: 260px !important;
}

#tableForm2{
	width: 260px;
	left: 0;
}

#tableForm2 label {
	font-size: 14px;
}

#tableForm2 h4 {
	font-size: 20px;
	float:right;
	
}

#tableForm2 .select-input {
	height: 30px;
	line-height: 30px;
	background: url(../img/caret-black-down.png) no-repeat right center #9fb2be;
}

#tableForm2 .form-group + .form-group {
	margin-top: 10px;
	margin-left: 0;
}

#tableForm2 .form-group,
#tableForm2 .select-input {
	float: none;
}

#tableForm2 textarea,
#tableForm2 input[type="text"],
#tableForm2 input[type="password"],
#tableForm2 input[type="datetime"],
#tableForm2 input[type="datetime-local"],
#tableForm2 input[type="date"],
#tableForm2 input[type="month"],
#tableForm2 input[type="time"],
#tableForm2 input[type="week"],
#tableForm2 input[type="number"],
#tableForm2 input[type="email"],
#tableForm2 input[type="url"],
#tableForm2 input[type="search"],
#tableForm2 input[type="tel"],
#tableForm2 input[type="color"] {
  display: inline-block;
  height: 22px;
  padding: 4px 1%;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 22px;
  color: #555555;
  vertical-align: middle;
	border: none;
	background-color: #9fb2be;
	width: 98%;
}

#tableForm2 textarea {
	resize:none;
	height: 72px;
}

#tableForm2 .btn + .btn {
	margin-left: 10px;
}
#tableForm3 {
	width: 0;
	padding: 20px;
	position: fixed;
	bottom: 60px;
	top:50px;
	left: -50px;
	margin-left: 970px;
	z-index: 3;
	/*background-color: #afbfca;*/
	overflow: auto;
}

#tableForm3 .alt-scroll-content {
	width: 260px !important;
}

#tableForm3{
	width: 260px;
	left: 0;
}

#tableForm3 label {
	font-size: 14px;
}

#tableForm3 .select-input {
	height: 30px;
	line-height: 30px;
	background: url(../img/caret-black-down.png) no-repeat right center #9fb2be;
}

#tableForm3 .form-group + .form-group {
	margin-top: 10px;
	margin-left: 0;
}

#tableForm3 .form-group,
#tableForm3 .select-input {
	float: none;
}

#tableForm3 textarea,
#tableForm3 input[type="text"],
#tableForm3 input[type="password"],
#tableForm3 input[type="datetime"],
#tableForm3 input[type="datetime-local"],
#tableForm3 input[type="date"],
#tableForm3 input[type="month"],
#tableForm3 input[type="time"],
#tableForm3 input[type="week"],
#tableForm3 input[type="number"],
#tableForm3 input[type="email"],
#tableForm3 input[type="url"],
#tableForm3 input[type="search"],
#tableForm3 input[type="tel"],
#tableForm3 input[type="color"] {
  display: inline-block;
  height: 22px;
  padding: 4px 1%;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 22px;
  color: #555555;
  vertical-align: middle;
	border: none;
	background-color: #9fb2be;
	width: 98%;
}

#tableForm3 textarea {
	resize:none;
	height: 72px;
}

#tableForm3 .btn + .btn {
	margin-left: 10px;
}
/* End Table Form
-------------------------------------------------------------------------------*/

/* Right Sidebar
-------------------------------------------------------------------------------*/
#sidebarRight.barHide {
	width: 30px;
	cursor: pointer;
}
#sidebarRight  ul>li>a{
text-transform: capitalize;
	font-size: 16px;
	font-weight: lighter;
	line-height: 32px;
	padding: 5px 20px;
	display: block;
	color: #fff;
	margin: 0 auto;
    margin-top: 10px;
	margin-left:60px;
	position: relative;
	overflow: auto;
}
#sidebarRight  ul>li>a:hover{
	text-transform: capitalize;
	font-size: 16px;
	font-weight: lighter;
	line-height: 32px;
	padding: 5px 20px;
	display: block;
	color: #fff;
	margin: 0 auto;
    margin-top: 10px;
	margin-left:40px;
	position: relative;
	overflow: auto;
	background-color: #235a7e;
}

#sidebarRight {
	width: 300px;
	z-index: 3;
	background-color: #6d9fbf;
	top: 10px;
	bottom: 10px;
	right: 0;
	position: fixed;
	border-radius: 10px 0 0 10px;
}

#sidebarRight .elipsis {
	left: 13px;
	background: url(../img/v-elipsis.png) no-repeat center top;
	height: 20px;
	width: 5px;
}

#sidebarRight .elipsis:first-child {
	top: 11px;
}

#sidebarRight .elipsis:last-child {
	bottom: 11px;
}
/* End Right Sidebar
-------------------------------------------------------------------------------*/

/* Modal
-------------------------------------------------------------------------------*/
.modal {
	background-color: #afbfca;
	position: absolute;
	bottom: 10px;
	left: 335px;
	z-index: 1000;
	padding: 10px;
}

#schemeModal {
	width: 330px;
	height: 310px;	
}

#schemeModal h4 {
	font-size: 20px;
	font-weight: lighter;
	margin-bottom: 30px;
}

#schemeModal .color-panel {
	width: 100%;
	height: 235px;
	background: url(../img/scheme-panel.png) no-repeat center center;
}

[id*="Modal"].hide {
	height: 0 !important;
	width: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}

#chartModal {
	width: 650px;
	height: 320px;
}

#chartModal .black-link {
	position: absolute;
	bottom: 20px;
	color: #191919;
	padding-right: 30px;
	background: url(../img/caret-black-down.png) right center transparent no-repeat;
}
/* End Modal
-------------------------------------------------------------------------------*/

/* Mobile Size
-------------------------------------------------------------------------------*/
@media (min-width: 489px) and (max-width: 1200px) {
	#sidebarMenu {
		width: 225px;
	}

	#tableFilter,
	#tableForm,
	.tableData, 
	.tableOpt {
		margin-left: 235px;
	}

	#tableForm {
		margin-left: 545px;
	}

	#viewBy {width: 100%;}
	#employee {width: 100%;}
	#period {width: 100%;}
	#date {width: 30%;}
	#month {width: 30%;}
	#year {width: 30%;}
	#more {width: 100%;}

	#schemeModal {
		left: 235px;
	}
}

@media (min-width: 489px) and (max-width: 767px) {
	#tableForm.openForm {
		width: auto;
		right: 40px;
	}

	#tableForm .alt-scroll-content {
		width: 100% !important;
	}
}

@media (min-width: 489px) and (max-width: 859px) {
	#tableFilter.filterOpen {
		height: 110px;
	}

	#tableFilter .form-group {
		margin: 0 5px 10px;
	}

	#tableFilter .form-group + .form-group {
		margin-left: 5px;
	}

	#tableFilter.filterOpen ~ .tableData {
		top: 150px;
	}
}

@media (min-width: 1400px) {
	.tableData .alt-scroll-content {
		width: 100% !important;
	}
}

@media (max-height: 640px) {
	.bottom-fix {
		position: static;
	}

	#sidebarMenu .alt-scroll-content {
		height: auto !important;
	}
}
/* End Mobile Size
-------------------------------------------------------------------------------*/


/* RQS RYAN */
.currency_field {
	text-align: right;
}

.color_red {
	color: red;
}

.datetime_field {
	min-width: 120px;
}

.date_field {
	min-width: 60px;
}

.listing_data {
	padding: 5px;
}